/* You can add global styles to this file, and also import other style files */
@import "assets/css/style.scss";
iframe {
    img {
        width: 100%;
    }
}

/* Dynamic circle
---------------------------------------------------------------- */
.orna-circle {
    position: absolute;
    top: 50%;
    background-color: #7d6ee7;
    opacity: .078;
    width: 500px;
    height: 500px;
    margin-left: -250px;
    margin-top: -250px;
    -webkit-animation: circle_animation 7s linear infinite;
    animation: circle_animation 7s linear infinite;
}

@-webkit-keyframes circle_animation {

    0%,
    to {
        border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    34% {
        border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
        -webkit-transform: translate3d(0, 5px, 0) rotate(.01deg);
        transform: translate3d(0, 5px, 0) rotate(.01deg)
    }

    50% {
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
        -webkit-transform: translate3d(0, -3px, 0) rotate(.01deg);
        transform: translate3d(0, -3px, 0) rotate(.01deg)
    }
}

@keyframes circle_animation {

    0%,
    to {
        border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    34% {
        border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
        -webkit-transform: translate3d(0, 5px, 0) rotate(.01deg);
        transform: translate3d(0, 5px, 0) rotate(.01deg)
    }

    50% {
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
        -webkit-transform: translate3d(0, -3px, 0) rotate(.01deg);
        transform: translate3d(0, -3px, 0) rotate(.01deg)
    }
}

/* Batch add margins margin or padding */
@for $i from 1 through 50 {
    .m-#{ $i } { margin: $i + px; }
    .m-t-#{ $i } { margin-top: $i + px; }
    .m-r-#{ $i } { margin-right: $i + px; }
    .m-b-#{ $i } { margin-bottom: $i + px; }
    .m-l-#{ $i } { margin-left: $i + px; }

    .p-#{ $i } { padding: $i + px; }
    .p-t-#{ $i } { padding-top: $i + px; }
    .p-r-#{ $i } { padding-right: $i + px; }
    .p-b-#{ $i } { padding-bottom: $i + px; }
    .p-l-#{ $i } { padding-left: $i + px; }
}

// table表格分页样式
.pagination-wrap-position {
    .ant-table-pagination.ant-pagination {
        justify-content: flex-start;
    }
}

.upload-img-box {
    .ant-upload-select-picture-card {
        overflow: hidden;
    }
}

// model 弹窗
.custom-model-wrap {
    .ant-modal-body {
        padding: 0;
    }
    .custom-model-body {
        padding: 24px;
    }
    .custom-model-foot {
        box-sizing: border-box;
        .custom-foot-cont {
            padding: 10px 16px;
            text-align: right;
            background: transparent;
            border-top: 1px solid #f0f0f0;
            border-radius: 0 0 2px 2px;
            button {
                margin-left: 10px;
            }
        }
    }
}

// seach wrap
.zdy-seach-wrap {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    [nz-button] {
        &:last-child {
            margin: 0;
        }
    }

    .operation-btns {
        box-sizing: border-box;
        padding: 2px 0;
    }

    .seach-content {
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;

        nz-tree-select,
        nz-select {
            min-width: 240px;
        }
        [nz-input] {
            min-width: 220px;
        }

        .seach-item {
            display: flex;
            align-items: center;
            padding: 2px 0;

            .seach-label {
                flex-grow: 0;
                color: #b7b7b7;
                &::after {
                    content: ":";
                    position: relative;
                    top: -0.5px;
                    margin: 0 8px 0 2px;
                }
            }

            .seach-control {
                flex: 1 1 0;
            }
        }
    }
}

.mcolor-green {
    color: #67C23A;
}
.mcolor-red {
    color: #F56C6C;
}

/* Common Search
---------------------------------------------------------------- */
.common-search-wrap {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .common-search-btns {
        box-sizing: border-box;
        padding: 5px 0;
    }

    .common-search-forms {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .common-form-item {
            box-sizing: border-box;
            display: flex;
            padding: 5px 10px 5px 0;

            &:last-child {
                padding-right: 0;
            }

            .common-search-label {
                position: relative;
                display: inline-flex;
                align-items: center;
                max-width: 100%;
                height: 32px;
                color: #303133;
                font-size: 14px;

                &::after {
                    content: ":";
                    position: relative;
                    margin: 0 8px 0 2px;
                }
            }

            .common-search-conrol {
                flex: 1 1 0;

                nz-tree-select,
                nz-select {
                    min-width: 240px;
                }
                [nz-input] {
                    min-width: 240px;
                }
            }
        }
    }
}

/* Scroll Bar
---------------------------------------------------------------- */
.mine-scrollbar-wrapper {
    &::-webkit-scrollbar {
      /* 滚动条整体样式 */
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      /* 滚动条里面小方块 */
      border-radius: 4px;
      background: rgba(144, 147, 153, .3);
    }

    &::-webkit-scrollbar-track {
      /* 滚动条里面轨道 */
      border-radius: inherit;
      background: rgba(144, 147, 153, .12);
    }
}

.mine-form-align {
    .ant-form-item-label {
        text-align: left;
    }
}

/* Common Button
---------------------------------------------------------------- */
$btnColors: (
    'green': #67C23A,
    'orange': #E6A23C
);
@each $btnKey,$btnVal in $btnColors {
    .mbtn-#{ $btnKey } {
        color: #fff;
        background: $btnVal !important;
        border-color: $btnVal !important;

        &:hover, &:focus {
            color: #fff;
            background: $btnVal !important;
            border-color: $btnVal !important;
            opacity: .85;
        }

        &[disabled] {
            color: rgba(0, 0, 0, 0.25) !important;
            background: #f5f5f5 !important;
            border-color: #d9d9d9 !important;
            text-shadow: none;
            box-shadow: none;
        }
    }
}


.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background-color: #f5f5f5 !important;
}

.ant-table-body .ant-table-row-hover {
    background: #f5f5f5 !important;
}

.ant-table-body .ant-table-row-hover>td {
    background: #f5f5f5 !important;
}
